<!--
 * @Description: 柱图demo
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2020-08-04 15:14:43
 * @LastEditTime: 2020-09-03 19:19:44
-->
<template>
    <ScreenContainer class="barCharts">
        <!-- 标准单柱 -->
        <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar1"
                      :barBorderRadius="[30,30,0,0]"
                      title="标准单柱"
                      xName="姓名"
                      valEnding="%"
                      yName="数量" />
        </div>
        <!-- 标准多柱 -->
        <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar2"
                      title="标准多柱"
                      xName="姓名"
                      yName="数量" />
        </div>
        <!-- 全部堆叠多柱 -->
        <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar2"
                      title="全部堆叠多柱"
                      xName="姓名"
                      yName="数量"
                      stack />
        </div>
        <!-- 选择性堆叠多柱 -->
        <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar3"
                      title="选择性堆叠多柱"
                      xName="姓名"
                      yName="数量"
                      :stack="stack1" />
        </div>
        <!-- 标准横向单柱 -->
        <!-- <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar1"
                      title="标准横向单柱"
                      xName="数量"
                      yName="姓名"
                      barWidth="35%"
                      :barBorderRadius="30"
                      horizontal />
        </div> -->
        <!-- 横向单柱无轴线 -->
        <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar1"
                      title="横向单柱无轴线"
                      :seriesColors="['#5ef5ff','#1d88eb','#27bf99','#6268f2','#2d8ebf']"
                      labelPosition="right"
                      barWidth="35%"
                      hideValAxisLabel
                      hideValAxisLine
                      hideValSplitLine
                      hideCatAxisLine
                      horizontal
                      label />
        </div>
        <!-- 标准横向多柱 -->
        <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar2"
                      title="标准横向多柱"
                      xName="数量"
                      yName="姓名"
                      horizontal />
        </div>
        <!-- 横向全部堆叠多柱 -->
        <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar2"
                      title="横向全部堆叠多柱"
                      xName="数量"
                      yName="姓名"
                      :colors="['#f99e54','#ff5722','#ee29f1']"
                      horizontal
                      stack />
        </div>
        <!-- 横向选择性堆叠多柱 -->
        <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar3"
                      title="横向选择性堆叠多柱"
                      xName="数量"
                      yName="姓名"
                      :stack="stack1"
                      horizontal />
        </div>
        <!-- 横向滚动条(带视觉映射) -->
        <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar1"
                      title="横向滚动条(带视觉映射)"
                      xName="姓名"
                      yName="数量"
                      :dataZoom="dataZoom1"
                      :visualMap="visualMap" />
        </div>
        <!-- 纵向滚动条 -->
        <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar1"
                      :dataZoom="dataZoom2"
                      title="纵向滚动条"
                      yName="数量"
                      xName="姓名"
                      label />
        </div>
        <!-- 正负轴横向单柱 -->
        <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar4"
                      title="正负轴横向单柱"
                      xName="数量"
                      yName="姓名"
                      barWidth="35%"
                      :barBorderRadius="30"
                      :axisDegreeScope="{min:-1000,max:1000}"
                      horizontal
                      label />
        </div>
        <!-- 标注标线标域 -->
        <div class="box">
            <BarChart :apiMethod="getData"
                      apiParam="getBar1"
                      :markPoint="markPoint"
                      :markLine="markLine"
                      :markArea="markArea"
                      right="45"
                      title="标注标线标域"
                      xName="姓名"
                      yName="数量" />
        </div>
    </ScreenContainer>
</template>

<script>
import { getData } from '@/api/demo' //API 请求数据
import ScreenContainer from '@/components/pages/screenContainer.vue' //全局容器
import BarChart from '@/components/charts/default/barChart.vue' //柱状图
export default {
    name: 'barCharts',
    components: {
        ScreenContainer,
        BarChart,
    },
    data() {
        return {
            getData, //api方法
            //选择性堆叠参数
            stack1: [
                {
                    type: '堆叠1',
                    names: ['产品2', '产品3'],
                },
                {
                    type: '堆叠2',
                    names: ['产品4', '产品5', '产品6'],
                },
            ],
            dataZoom1: {
                //横向滚动条
                xAxisIndex: [0], //滚动数据源，这里默认第一条X轴，若为横向柱图可设置y轴。若为多轴图，可调整下标
                minValueSpan: 1, //最小显示到的柱子下标，1为2单位柱子
                maxValueSpan: 3, //最大显示到的柱子下标，3为4单位柱子
            },
            dataZoom2: {
                //纵向滚动条
                yAxisIndex: [0],
                start: 0, //滚动条默认显示当前轴数据范围，start为起始值，end为结束值，这里为百分比，最小0，最大100
                end: 80,
            },
            markPoint: {
                //标注
                data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' },
                ],
                label: {
                    color: '#fff',
                    textBorderColor: '#000',
                    formatter: function (params) {
                        return `${params.name}\n${params.value}`
                    },
                },
            },
            markLine: {
                //标线
                data: [{ type: 'average', name: '平均值' }],
                label: {
                    formatter: function (params) {
                        return `${params.name}\n${params.value}`
                    },
                },
            },
            markArea: {
                //标域
                label: {
                    position: 'right',
                },
                data: [
                    [
                        {
                            name: '标域',
                            yAxis: '200',
                        },
                        {
                            yAxis: '500',
                        },
                    ],
                ],
            },
            visualMap: {
                top: 10,
                right: 0,
                pieces: [
                    {
                        lte: 300,
                    },
                    {
                        gt: 300,
                        lte: 400,
                    },
                    {
                        gt: 400,
                        lte: 600,
                    },
                    {
                        gt: 600,
                        lte: 800,
                    },
                    {
                        gt: 800,
                        lte: 1000,
                    },
                ],
            },
        }
    },
}
</script>
<style lang="scss" scoped>
.barCharts {
    .box {
        width: 25%;
        height: 33.3333%;
    }
}
</style>
